<script setup>
	import { onMounted, ref } from 'vue'
	import { http } from '@/utils/http.js'
	import { onLoad, onShow, onShareAppMessage,onReachBottom } from '@dcloudio/uni-app'
	import { parseTime } from '@/utils/index.js'
	import { useUsercodeStore } from '@/store/usercode.js'
	import Tabbar from '@/components/TabbarCustom.vue'
	import ChooseModel from '@/components/ChooseModel.vue'

	const goodsData = ref([])
	const currentPage = ref(1)
	const chooseRef = ref(null);
	const chooseClassData = ref([])
	const currentClass = ref(undefined)
	const showOfficial = ref(true)
	const canLoadMore = ref(true)
	async function getList() {
		let params = {page:currentPage.value,limit:10,type:2};
		if(currentClass.value){
			params.class_id = currentClass.value;
		}
		
		if (!showOfficial.value){
			params.user_id = 1
		}
		
		const res = await http.request({
			url: '/api/box/boxList',
			method: 'POST',
			data: params
		})
		console.log(res)
		if (res.st == 1) {
			if (res.data.length < 10) {
				canLoadMore.value = false
			}
			goodsData.value = [...goodsData.value, ...res.data]
		}else {
			canLoadMore.value = false
		}

	}

	async function getBoxCategary() {
		const res = await http.request({
			url: '/api/shop/getClass',
			method: 'POST',
			data: {},
		})
		res.data.forEach((item) => {
			let ob = {
				id: item.id,
				value: item.class_name,
			}
			chooseClassData.value.push(ob)
		})
	}

	// 上拉加载
	onReachBottom(() => {
		if(canLoadMore.value){
			currentPage.value++
			getList()
		}
	})

	onMounted(() => {
		// getList()
	})

	onLoad(() => {
		getBoxCategary()
	})

	async function clearParams(){
		currentClass.value = undefined
		// showOfficial.value = true
		canLoadMore.value = true;
	}

	async function clearData(){
		goodsData.value = []
		currentPage.value = 1
	}


	function chooseClass(item){
		clearParams();
		clearData();
		currentClass.value = item.id;
		getList();
	}

	onShow(() => {
		clearData();
		clearParams();
		getList()
	})

	function gotoDetail(item){
		uni.navigateTo({
			url:"/pages/card/card-detail?id="+item.id
		})
	}
	
</script>

<template>
	<Tabbar :current="1"></Tabbar>
	<view class="luckybox-content">
		<view class="lucky-head">
			<view class="head-img">
				<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/opencard/opencard.png"></image>
			</view>
			<!-- 中间 -->
			<view class="head-lable">
				<view @click="chooseClass(item)" class="business-box" :style="currentClass == item.id? 'border: 2rpx solid #C1A6FF;color: #906DDE;':''" v-for="item in chooseClassData" :key="item.id">
					{{ item.value }}
				</view>
			</view>
		</view>
		<view class="" style="padding-bottom: 200rpx;">
			<view class="list" v-for="(item, index) in goodsData" :key="index" @click="gotoDetail(item)">
				<view class="imgs">
					<image :src="item.img"></image>
					<image class="level-img " :src="item.class_img"></image>
				</view>
				<view class="card-title">
					<view class="card-left">
						<text >{{item.name}}</text>
					</view>
					<view class="card-right">
						<view class="point" v-if="item.is_integral === '1'">
							<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/opencard/points.png"></image>
						</view>
						<view class="come-out" v-if="item.is_must === '1'">
							<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/opencard/comeout.png"></image>
						</view>
						<view class="card-money">
							<text >¥ {{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<style lang="scss" scoped>
	.luckybox-content {
		background-color: #E9EAF2;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		
	}
	
	.lucky-head {
		width: 730rpx;
		padding-bottom: 30rpx;
		border-radius: 14rpx;
		background: #FFFFFF;
		margin: 20rpx auto;
		.head-img {
			width: 674rpx;
			height: 364rpx;
			margin: 10rpx auto;
			image {
				width: 674rpx;
				height: 364rpx;
			}
		}
	}
	.head-lable {
		display: flex;
		justify-content: flex-start;
		width: 90%;
		margin-left: 40rpx;
		.lable-left {
			display: flex;
			justify-content: space-around;
			width: 50%;
		}
		.official-box,
		.business-box {
			margin-right: 10rpx;
			width: 152rpx;
			height: 54rpx;
			text-align: center;
			line-height: 54rpx;
			font-weight: 500;
			border-radius: 14rpx;
			border: 2rpx solid #C1A6FF;
			font-size: 28rpx;
			color: #906DDE;
		}
		.business-box {
			color: #A6A6A6;
			border: 2rpx solid #A6A6A6;
		}
	}
	.list {
		display: flex;
		flex-direction: column;
		width: 726rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 21rpx;
		margin: 10rpx auto;
		margin-bottom: 30rpx;
	}
	.imgs{
		margin: 20rpx auto;
		width: 688rpx;
		height: 300rpx;
		border-radius: 10rpx;
		position: relative;
		image{
			width:100%;
			height: 300rpx;
			border-radius: 10rpx;
		}
		.level-img{
				width: 122rpx;
				height: 55rpx;
				position: absolute;
				left: 0rpx;
				top: -1rpx;
				image{
					width: 100%;
					height: 55rpx;
				}
		}
	}
	.card-title{
		display: flex;
		justify-content: space-evenly;
		margin: auto;
		width: 92%;
		align-items: center;
		.card-left{
			font-size: 28rpx;
			font-weight: 600;
			color: #000;
			width: 50%;
		}
		.card-right{
			display: flex;
			justify-content: space-evenly;
			.point,.come-out{
				margin-right: 20rpx;
				display: flex;
				image{
					width: 77rpx;
					height: 32rpx;
				}
				
			}
			.card-money{
				font-size: 32rpx;
				font-weight: 600;
				color: #7948EA;
				margin: auto;
				line-height: 32rpx;
				text-align: center;
			}
		}
	}

</style>
